<template>
  <div class="tab-container" style="padding: 32px">
    <div class="www" />
    <el-descriptions size="big" :column="columnValue" :border="borderValue" style="font-size:20px;">
      <el-descriptions-item label="患者姓名">{{ name }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ sex }}</el-descriptions-item>
      <el-descriptions-item label="年龄">{{ age }}</el-descriptions-item>
      <el-descriptions-item label="入组时间">{{ joinTime }}</el-descriptions-item>
      <el-descriptions-item label="负责医生">{{ doctor }}</el-descriptions-item>
    </el-descriptions>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基线数据与临床随访" name="first">
        <el-divider />
        <steps />
      </el-tab-pane>
      <el-tab-pane label="治疗随访" name="second">
        <el-divider />
        <followup />
      </el-tab-pane>
      <el-tab-pane label="卫生经济学" name="third">
        <el-divider />
        <healthEconomics />
      </el-tab-pane>
      <el-tab-pane label="标本采集" name="fourth">
        <el-divider />
        <specimenCollection />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import steps from './steps.vue'
import followup from './followup/index.vue'
import healthEconomics from './healtheconomics/index.vue'
import specimenCollection from './specimencollection/index.vue'
import { initData } from '@/api/data'

export default {
  components: {
    steps,
    followup,
    healthEconomics,
    specimenCollection
  },
  data() {
    return {
      activeName: 'first',
      columnValue: 5,
      borderValue: true,
      query: {
        id: ''
      },
      name: '',
      sex: '',
      age: 0,
      joinTime: '',
      doctor: ''
    }
  },
  provide() {
    return {
      pId: this._routerRoot._route.query.id
    }
  },
  created() {
    this.query.id = this._routerRoot._route.query.id
    initData('api/patient/findById', this.query).then(data => {
      this.name = data.name
      this.sex = data.sex === 1 ? '男' : '女'
      this.age = data.age
      this.joinTime = data.joinTime
      this.doctor = data.doctor
    })
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event)
    }
  }
}
</script>
<style>
.www {
  width: 100%;
  height: 50px;
  background: -webkit-linear-gradient(left,hsla(0,0%,59%,.15),hsla(0,0%,59%,0),#05124E) no-repeat;
}
</style>
